import React, { useState, useEffect, useContext } from 'react';
import styles from './index.module.less';
import Header from '../../components/Header';
import { getTeamData } from '@app/common/api';
import { AllContext } from '../../AllContext';

const tabs = ['團隊收入'];
const userHeader = ['地址', '數量', '收入'];
const incomeHeader = ['時間', '地址', '收入'];

const Team = () => {
  const [tabIndex, setTabIndex] = useState(0);
  const [list, setList] = useState([]);
  const [teamIncome, setTeamIncome] = useState(0);
  const [teamNum, setTeamNum] = useState(0);
  const headerList = tabIndex == 0 ? incomeHeader : userHeader;
  const { address } = useContext(AllContext);

  useEffect(() => {
    if (address) {
      _getTeamData(address);
    }
  }, [address]);

  const _getTeamData = async (data) => {
    try {
      const { result = {}, msg } = await getTeamData(data);
      if (msg === 'success') {
        const { list, teamIncome, teamNum } = result;
        list && setList(list);
        teamIncome && setTeamIncome(teamIncome);
        teamNum && setTeamNum(teamNum);
      }
    } catch (error) {}
  };
  return (
    <div>
      <Header />
      <div className={styles['ui-content']}>
        <p className={styles['ui-team-data']}>{'團隊數據'.LANG()}</p>
        <div className={styles['ui-input']}>
          <span className={styles['title']}>{'團隊數量'.LANG()}</span>
          <div className={styles['right']}>
            <span className={styles['sum']}>{teamNum}</span>
          </div>
        </div>
        <div className={styles['ui-input']}>
          <span className={styles['title']}>{'團隊收入'.LANG()}</span>
          <div className={styles['right']}>
            <span className={styles['sum']}>{teamIncome}</span>
            <span>ETH</span>
          </div>
        </div>

        <div className={styles['ui-tab']}>
          {tabs.map((item, index) => {
            return (
              <div
                className={index == tabIndex ? styles['select'] : styles['unselect']}
                key={index}
                onClick={() => setTabIndex(index)}
              >
                {item.LANG()}
              </div>
            );
          })}
        </div>

        <div className={styles['ui-list']}>
          <ul className={styles['ui-userInput-tr']}>
            {headerList.map((o, i) => {
              return <li key={i}>{o.LANG()}</li>;
            })}
          </ul>
          {list.map(({ address, time, amount }, i) => {
            return (
              <ul className={[styles['ui-userInput-tr'], styles['ui-data']]} key={i}>
                <li>{time}</li>
                <li>
                  {address?.slice(0, 4)}***{address?.slice(address.length - 4)}
                </li>
                <li>{amount}ETH</li>
              </ul>
            );
          })}
          <div className={styles['ui-more']}>
            <img src="images/more.png" alt="" />
          </div>
        </div>

        <div className={styles['ui-list']}>
          <div className={styles['ui-title']}>{'我的分享鏈接'.LANG()}</div>
          <p>https://zz.btcmonlin</p>
          <div className={[styles['ui-share-btn'], styles['ui-btn']]}>{'分享'.LANG()}</div>
        </div>
        <div className={styles['ui-list']}>
          <div className={styles['ui-title']}>{'鏈接'.LANG()}</div>
          <p className={styles['ui-recoment']}>{'設置推薦人，推薦人將獲得礦池額外獎勵'.LANG()}</p>
        </div>
      </div>
    </div>
  );
};
export default Team;
